/**
 * @description: 编辑器DOM构建器
 */
export class DomBuilder {
    constructor(el, options = {}) {
        if (!el) throw new Error('传入根节点初始化编辑器!')
        this.options = {
            title: '未命名文件',
            language: 'javascript',
            ...options
        }
        // 初始化UI并获取相关元素
        return this._initUI(el)
    }

    /**
    * 初始化UI界面
    * @param {HTMLElement} container - 容器元素
    * @returns {Object} UI元素集合
    */
    _initUI(container) {
        // 创建所有元素
        const elements = this._createElements()
        // 组装DOM结构
        this._assembleDOM(elements)
        // 将编辑器添加到容器中
        container.appendChild(elements.editorContainer)
        // 返回需要引用的元素
        return this._getExposedElements(elements)
    }


    /**
        * 创建所有DOM元素
        * @returns {Object} 所有创建的元素
        */
    _createElements() {
        const createElement = (tag, className, id, textContent) => {
            const element = document.createElement(tag)
            if (className) element.className = className
            if (id) element.id = id
            if (textContent) element.textContent = textContent
            return element
        }
        return {
            // 主容器
            editorContainer: createElement('div', 'editor-container'),
            // 头部区域
            editorHeader: createElement('div', 'editor-header'),
            editorTitle: createElement('div', 'editor-title', null, this.options.title),
            editorToolbar: createElement('div', 'editor-toolbar'),
            statusIndicator: createElement('div', 'status-indicator'),
            statusDot: createElement('div', 'status-dot'),
            statusText: createElement('span', null, null, '智能提示'),
            // 编辑器主体
            editorWrapper: createElement('div', 'editor-wrapper'),
            lineNumbers: createElement('div', 'line-numbers', 'line-numbers', '1'),
            editorContent: createElement('div', 'editor-content'),
            highlightLayer: createElement('div', 'highlight-layer', 'highlight-layer'),
            codeEditor: createElement('textarea', null, 'code-editor'),
            // 自动完成弹窗
            autocompletePopupDom: createElement('div', 'autocomplete-popup', 'autocomplete-popup'),
            autocompleteHeader: createElement('div', 'autocomplete-header'),
            headerText: createElement('span', null, null, '智能提示'),
            completionCount: createElement('span', null, 'completion-count', '0 项'),
            autocompleteList: createElement('div', 'autocomplete-list', 'autocomplete-list'),
            autocompleteFooter: createElement('div', 'autocomplete-footer'),
            footerLeft: createElement('div'),
            footerRight: createElement('div', null, null, this.options.language),
            // 键盘提示
            keyHintUp: createElement('span', 'key-hint', null, '↑↓'),
            keyHintEnter: createElement('span', 'key-hint', null, 'Enter'),
            keyHintEsc: createElement('span', 'key-hint', null, 'Esc'),
            // 状态栏
            statusBar: createElement('div', 'status-bar'),
            statusItem1: createElement('div', 'status-item'),
            statusItem2: createElement('div', 'status-item'),
            languageSpan: createElement('span', null, null, this.options.language),
            // 状态信息
            lineSpan: createElement('span', null, null, '行: '),
            lineCount: createElement('span', null, 'line-count', '1'),
            columnSpan: createElement('span', null, null, '列: '),
            columnCount: createElement('span', null, 'column-count', '1'),
            charSpan: createElement('span', null, null, '字符: '),
            charCount: createElement('span', null, 'char-count', '0'),
            // 连接状态
            connectionStatus: createElement('div', 'connection-status'),
            connectionStatusSpan: createElement('span', 'status-connected', 'connection-status', '●'),
            connectionTextSpan: createElement('span', null, 'connection-text', '已就绪')
        }
    }

    /**
     * 组装DOM结构
     * @param {Object} elements - 所有元素对象
     */
    _assembleDOM(elements) {
        const {
            editorContainer, editorHeader, editorTitle, editorToolbar, statusIndicator,
            statusDot, statusText, editorWrapper, lineNumbers, editorContent,
            highlightLayer, codeEditor, autocompletePopupDom, autocompleteHeader,
            headerText, completionCount, autocompleteList, autocompleteFooter,
            footerLeft, footerRight, keyHintUp, keyHintEnter, keyHintEsc,
            statusBar, statusItem1, statusItem2, languageSpan, lineSpan, lineCount,
            columnSpan, columnCount, charSpan, charCount, connectionStatus,
            connectionStatusSpan, connectionTextSpan
        } = elements
        // 设置特殊属性
        codeEditor.spellcheck = false
        // 组装头部
        statusIndicator.append(statusDot, statusText)
        editorToolbar.appendChild(statusIndicator)
        editorHeader.append(editorTitle, editorToolbar)
        // 组装编辑器内容
        editorContent.append(highlightLayer, codeEditor)
        editorWrapper.append(lineNumbers, editorContent)
        // 组装自动完成弹窗
        autocompleteHeader.append(headerText, completionCount)
        // 组装键盘提示
        footerLeft.append(
            keyHintUp, ' 选择',
            keyHintEnter, ' 确认',
            keyHintEsc, ' 取消'
        )
        autocompleteFooter.append(footerLeft, footerRight)
        autocompletePopupDom.append(autocompleteHeader, autocompleteList, autocompleteFooter)
        // 组装状态信息
        lineSpan.appendChild(lineCount)
        columnSpan.appendChild(columnCount)
        charSpan.appendChild(charCount)
        connectionStatus.append(connectionStatusSpan, connectionTextSpan)
        statusItem1.append(lineSpan, columnSpan, charSpan, connectionStatus)
        statusItem2.appendChild(languageSpan)
        statusBar.append(statusItem1, statusItem2)
        // 组装主容器
        editorContainer.append(editorHeader, editorWrapper, autocompletePopupDom, statusBar)
    }

    /**
     * 获取需要暴露的元素
     * @param {Object} elements - 所有元素对象
     * @returns {Object} 需要暴露的元素集合
     */
    _getExposedElements(elements) {
        return {
            editor: elements.codeEditor,
            highlightLayer: elements.highlightLayer,
            lineNumbers: elements.lineNumbers,
            autocompletePopupDom: elements.autocompletePopupDom,
            autocompleteList: elements.autocompleteList,
            autocompleteHeader: elements.autocompleteHeader,
            autocompleteFooter: elements.autocompleteFooter,
            footerLeft: elements.footerLeft,
            footerRight: elements.footerRight,
            keyHintUp: elements.keyHintUp,
            keyHintEnter: elements.keyHintEnter,
            keyHintEsc: elements.keyHintEsc,
            completionCount: elements.completionCount,
            connectionStatus: elements.connectionStatusSpan,
            connectionText: elements.connectionTextSpan,
            lineCount: elements.lineCount,
            columnCount: elements.columnCount,
            charCount: elements.charCount
        }
    }
}